<html>
<head>
    <title>Turkey Tweet Map</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCAl7HwvvBluw7idj9p-JZISwy8D3-_MSQ&sensor=true"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/twitter/css/style.css">
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="http://localhost:8080/twitter/js/scripts.js"></script>
    <style type="text/css">
        html, body, #map-canvas { height: 100%; margin: 0; }
    </style>

    <script type="text/javascript">
        var map;
        function initialize() {
            map = new google.maps.Map(
                    document.getElementById('map-canvas'), {
                        center: new google.maps.LatLng(41.035, 28.976),
                        zoom: 12,
                        mapTypeId: google.maps.MapTypeId.SATELLITE
                    });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

        var ws;

        $(document).ready(
            function () {
                ws = new WebSocket("ws://localhost:8080/twitter/start");
                ws.onopen = function (event) {

                }
                ws.onmessage = function (event) {
                    if(event.data.indexOf('Graph|||') == 0) {
                        var graphDataJson = event.data.split('|||')[1];
                        var graphData = eval(graphDataJson);
                        var chartData = [];
                        for(var i = 0; i < 3; i++) {
                            chartData.push([graphData[i].name, graphData[i].count]);
                        }
                        chart.series[0].setData(chartData, true);
                    } else {
                        var tweet = [];
                        tweet[0] = event.data;
                        addMarkers(tweet);
                    }
                }
                ws.onclose = function (event) {

                }
            }
        );

        var allMarkers = [];

        function addMarkers(list) {
            var markers = [];
            var infowindows = [];
            var keys = [];
            for (var i = 0; i < list.length; i++) {
                var latLon = list[i].split('|||');
                var tweetId = latLon[0];

                var infowindow = new google.maps.InfoWindow();
                var username = latLon[4];
                var profilePicUrl = latLon[5];
                var tweetText = latLon[3];
                var profileBanner = latLon[6];
                var icon = latLon[7];
                var content = '<div class="twitterTab"><div class="divImg"><img src="' + profilePicUrl + '"/></div>' + '<h3>' + username + '</h3><p>'+ tweetText +'"</p></p></div>';
                infowindow.setContent(content);

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latLon[1], latLon[2]),
                    map: map,
                    icon: 'http://localhost:8080/twitter/images/' + icon + '.png'
                });

                markers[tweetId.toString()] = marker;
                allMarkers[tweetId.toString()] = marker;
                infowindows[tweetId.toString()] = infowindow;
                keys[i] = tweetId;
            }


            for (var i = 0; i < keys.length; i++) {
                google.maps.event.addListener(markers[keys[i].toString()], 'click', function(innerKey) {
                    getRemoveStyle();
                    return function() {
                        $('.twitterTab').parent().parent().parent().hide();
                        infowindows[innerKey].open(map, markers[innerKey]);
                    }
                }(keys[i].toString()));
            }
            function getRemoveStyle(){
                $(".twitterTab").parent().css("overflow","hidden");
            }
        }

        var chart;
        $(function () {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
				    margin: [0, 0, 0, 0],
					spacingTop: 0,
					spacingBottom: 0,
					spacingLeft: 0,
					spacingRight: 0,
                    plotBackgroundColor: null,
					backgroundColor:'rgba(0, 0, 0, 0.1)',
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: ''
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
						size:'100%',
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Istanbulun Sorunlari',
                    data: [
                        ['Medical', 100],
                        ['Transportation', 100],
                        ['Service', 100]
                    ]
                }],
                legend: {
                    backgroundColor: '#ffffff',
                    labelFormat: '<span style="color:{color};>{name}</span>: <b>{percentage:.1f} </b><br/>'
                }
            });
        });



    </script>
</head>
    <body>
        <div id="map-canvas"></div>
		<div class="headerMap">
			<h1><img src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/messagebox_warning.png" width="36" height="36">sorunIstanbul v1.0</h1>
		</div>
        <div id="container" style="">
			
		</div>
		<button class="toggleBar highKapali"></button>
        <!--<div class="solKontrol">
            <div class="logo">Twitter in Turkey</div>
            <div class="inputAlan">
                <form action="">
                    <input type="text" placeholder="Stream Keywords">
                    <input type="submit" value="GET">
                </form>
            </div>
            <div class="buttonType">
                <h3>Filtreler</h3>
                <button style="background:#7F9FD9;border:1px solid #ccc">Olumlu</button>
                <button>Olumsuz</button>
            </div>
            <div class="ttechLab">
                <a href="http://www.turkcellteknoloji.com.tr" title="Turkcell Teknoloji" target="_blank"><img width="120" src="http://www.mehmetalp.com.tr/logo.png"></a>
            </div>
        </div> -->
    </body>
</html>